<template>
  <div id="after-select-chapter">
    <!-- 带模板选题-带章节页面 -->
    <div class="jx-content add-time">
      <el-form class="" :inline="true" ref="searchForm" :model="searchForm" label-width="80px">
        <el-form-item label="试卷名称 :">
          <el-input v-model="reqData.paperName" class="input-long"></el-input>
        </el-form-item>
        <el-form-item label="考试时间 :">
          <el-input @keyup.native="provingEx(reqData,'timeLength')" v-model="reqData.timeLength"></el-input>
        </el-form-item>
        <el-form-item label="分钟" class="form-left"></el-form-item>
        <el-form-item class="fr">
          <el-button @click.native="setParamsData" class="button-style">
            预 览
          </el-button>
          <el-button @click="submitData" class="button-style">保存试卷</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="jx-content">
      <div class="clearfix chose-model">
        <div class="title c-blue fs18 fbold fl">模板模式</div>
        <div class="fr">
          <el-tooltip class="item" effect="dark" content="按照模板定义规则生成试卷" placement="bottom">
            <i style="vertical-align: -1px;" class="iconfont icon-wenti-m c-blue fs18"></i>
          </el-tooltip>
        </div>
        <div class="fr c-blue fs16 table-button">
          <router-link :to="{path:'/Teaching/MyCourses/Examination/TestPaper/selectTemplate',query:{paperName:reqData.paperName,timeLength:reqData.timeLength}}">
            <i class="iconfont icon-moban"></i>选择试题模板
          </router-link>
        </div>
      </div>
      <div class="clearfix">
        <div class="fl c-blue fs16 table-button">
          <span>
            <i style="color:#3fdb9b;" class="iconfont icon-zhengque"></i>已选择模板</span>
          <span class="look-question">
            <span class="look-question-btn">
              <i class="iconfont icon-xianshidaan"></i>查看</span>
            <div class="look-question-content" v-show="lookContent">
              <div class="look-question-item" v-for="(item,index) in modelInfoContent" :key="index">
                <div class="chapter-name" :title="item.name">{{ index+1 }}. {{ item.name }}</div>
                <div style="min-width:80px;padding-left:10px;">
                  共 {{ item.content.map(i=>i.count*i.score).reduce((total,num)=>total+num) }} 分
                </div>
                <div class="look-question-item2" v-for="(item2,index2) in item.content" :key="index2">
                  <div>{{ item2.typeName }}</div>
                  <div>{{ item2.count }}题</div>
                  <!-- <div>每题{{ item2.score }}分</div> -->
                </div>
              </div>
              <div class="look-question-score">总分数：{{ score }}分</div>
            </div>
          </span>
          <span class="del-modal">
            <router-link :to="{path:'/Teaching/MyCourses/Examination/TestPaper/AfterSelectTemplate',query:{paperName:reqData.paperName,timeLength:reqData.timeLength}}">
              <i class="iconfont icon-quxiao"></i>取消模板
            </router-link>
          </span>
        </div>
        <div class="fr">
          该模板 共{{ allCountSum }}题
          <span style="margin:0 10px;">已选择 {{ nowCountSum }}题</span> 总分数：{{ score }}分
        </div>
      </div>
    </div>
    <div class="jx-content is-modal-bottom">
      <!-- 预览弹出框 -->
      <el-dialog :close-on-click-modal="false" width="850" class="dialog-questions" title="试题预览" :visible.sync="dialogQuestion">
        <div class="dialog-content markdown-body">
          <div class="question-title" v-html="rowData.content"></div>
          <div v-if="rowData.questionType === 1" v-for="(item,index) in rowData.answer" :key="index" class="question-chose">
            <span>{{ answerChose[index] }}：</span>
            <span class="question-flex" v-html="item.content"></span>
          </div>
          <div class="question-answer">答案：
            <span v-if="rowData.questionType === 3" class="chose" style="font-family:'黑体';font-size:16px;" v-html="answerTrue"></span>
            <span v-else class="chose" v-html="answerTrue"></span>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button class="button-style" @click="dialogQuestion = false">确 定</el-button>
        </span>
      </el-dialog>
      <div class="search-box">
        <el-form class="fl" :inline="true" ref="searchForm" :model="searchForm" label-width="80px">
          <el-form-item label="章节名称 :">
            <el-select v-model="chapterId" placeholder="请选择" @change="selectChange">
              <el-option v-for="(item,index) in chapterList" :key="index" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="chapterId">
            <span>该章节：
              <span v-for="(item,index) in modelInfoContent.find(item=>item.id === chapterId).content" :key="index">
                {{ item.typeName }} {{ item.count }}题
              </span>
              <span v-if="modelInfoContent">
                共 {{ modelInfoContent.find(item=>item.id===chapterId).content.map(i=>i.count*i.score).reduce((total,num)=>total+num) }}分
              </span>
            </span>
          </el-form-item>
          <!-- <el-form-item v-if="chapterId">
            <span>该章节：
              <span v-for="(item,index) in modelList" :key="index">
                {{ item.typeMessage }} {{ item.questionList.length }}题
              </span>
              <span v-if="modelInfoContent">
                共 {{ modelInfoContent.find(item=>item.id===chapterId).content.map(i=>i.count*i.score).reduce((total,num)=>total+num) }}分
              </span>
            </span>
          </el-form-item> -->
        </el-form>
      </div>
      <div class="clear"></div>
      <div class="table-box">
        <div class="no-table-top"></div>
        <div class="tab-group">
          <!-- 题目类型 modeInfoChapterQuestionList -->
          <el-badge :hidden="!getTypeNowCountSum(item.type)" v-for="(item,index) in modeInfoChapterQuestionList" :key="index" :value="getTypeNowCountSum(item.type)" class="item">
            <el-button :class="{'active':btnIndex==index}" @click="tabClick(item.type,index)">
              {{ item.typeName }}
            </el-button>
          </el-badge>
        </div>
        <el-table @select="selectItem" ref="md" :data="modelListItem" style="width: 100%">
          <el-table-column type="selection" :selectable="checkboxT" width="55"></el-table-column>
          <el-table-column prop="content" label="试题题目">
            <template slot-scope="scope">
              <div :title="delHTMLLabel(scope.row.content)" style="text-align:left;" class="question-content-timu beyond-hiding" v-html="delHTMLLabel(scope.row.content)"></div>
            </template>
          </el-table-column>
          <el-table-column prop="chapterName" label="章节" width="180">
            <template slot-scope="scope">
              <div class="question-content-timu beyond-hiding" :title="scope.row.chapterName" v-html="scope.row.chapterName"></div>
            </template>
          </el-table-column>
          <el-table-column label="分数" width="180">
            <template slot-scope="scope">{{ modeInfoChapterQuestionList.find(item => item.type === scope.row.questionType).score }}</template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="200">
            <template slot-scope="scope">
              <div class="table-button">
                <el-button @click="dialogQuestionShow(scope.row)" type="text" size="small">预览</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import $ from "jquery";
export default {
  data() {
    return {
      //展示
      //章节列表包含题目类型
      chapterList: [],
      //arr
      //遍历题目类型
      //引用modelInfo.content[i].content
      modeInfoChapterQuestionList: [],
      //通过tab点击事件查找modelList中对应题型题目
      modelListItem: [],
      //查看模板展示数组
      modelInfoContent: null,
      //试卷总分数
      score: 0,

      //获取暂存
      //列表数组
      modelList: [],
      //模板信息
      modelInfo: null,
      //object
      //放置章节，题型下题目数量，用于选题时存储、删除题目id，判定所选题目数量等
      //引用为modeInfoChapterQuestionList[i] 即modelInfo.content[i].content[i]
      modeInfoItem: null,
      //当前最大题目数
      maxCount: 0,
      //当前题目数
      nowCount: 0,
      //当前按钮index
      btnIndex: 0,
      //总题数
      countSum: 0,
      allCountSum: 0,
      //当前已选择题数
      nowCountSum: 0,

      //预览数据
      rowData: [],
      //试题正确答案
      answerTrue: "",
      //试题答案选项
      answerChose: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"],
      //预览弹出框
      dialogQuestion: false,
      activeName: "1",
      //查看框显示
      lookContent: false,
      chapterId: "",
      reqData: {
        //模板id
        modelId: "",
        //试卷名称
        paperName: this.$route.query.paperName,
        //考试时间
        timeLength: this.$route.query.timeLength,
        //题目列表
        questionList: [
          {
            maxCount: 0,
            type: 1,
            typeMessage: "选择题",
            score: 0,
            questionIdList: []
          },
          {
            maxCount: 0,
            type: 2,
            typeMessage: "判断题",
            score: 0,
            questionIdList: []
          },
          {
            maxCount: 0,
            type: 3,
            typeMessage: "填空题",
            score: 0,
            questionIdList: []
          },
          {
            maxCount: 0,
            type: 4,
            typeMessage: "简答题",
            score: 0,
            questionIdList: []
          },
          {
            maxCount: 0,
            type: 6,
            typeMessage: "实验题",
            score: 0,
            questionIdList: []
          }
        ]
      },
      searchForm: {
        chapterName: "",
        chapterId: ""
      }
    };
  },
  mounted() {
    //没有模板信息值退回手动选题页面
    let that = this;
    console.log(that.$route.params.row, 6666);
    if (!that.$route.params.row) {
      this.$router.push({
        path: "AfterSelectTemplate"
      });
    } else {
      this.init();
    }
  },
  methods: {
    //获取模板信息 -》 获取章节信息 -> 按模板过滤章节
    //切换章节 -> 获取该章节题目列表
    //列表加载后再执行操作
    init() {
      this.$message.success({
        message: "您已进入模板模式，您对试题的选择将受到模板规则的限制。",
        duration: 5000
      });
      this.getModelInfo();
      this.getTopicSelected();
      this.lookQuestion();
      //this.getList();
    },

    delHTMLLabel(str) {
      let reg = /<[^>]*>|<\/[^>]*>/gm;
      let result = str.replace(reg, "");
      return result;
    },
    //验证**************************************************************************************
    //输入验证 键盘抬起事件 限制input框只能输入正整数
    provingEx(item, prop) {
      let that = this;
      //限制输入数字
      console.log(item[prop], 55);
      let reg = /^[0-9]+$/;
      let isInt = reg.test(item[prop]);
      console.log(isInt, 66);
      if (!isInt) {
        item[prop] = "";
        console.log(item[prop], 77);
        that.$message.warning("只能输入数字");
      }
      //限制不能大于120
      let isQuesNum = item[prop] > 120 || item[prop] < 1;
      if (isQuesNum) {
        item[prop] = "";
        that.$message.warning("考试时间为1-120分钟");
      }
      //限制不能大于题库数量
    },
    //提交验证 预览和保存试卷 整合reqData发送数据+验证
    //整合reqData发送数据
    filterReqData() {
      let that = this;
      let reqData = that.reqData;
      console.log(reqData, 1);
      let modelInfo = that.modelInfo;
      //模板id
      reqData.modelId = modelInfo.id;
      //总分
      reqData.score = modelInfo.score;
      //整合idList
      let sum = modelInfo.content.map(item => item.content);
      reqData.questionList.forEach(item => {
        //清空
        item.questionIdList = [];
        sum.forEach(item2 => {
          item2.forEach(item3 => {
            if (item.type === item3.type) {
              if (item3.questionIdList.length) {
                item.questionIdList.push(...item3.questionIdList);
                //分数
                item.score = item3.score;
              }
            }
          });
        });
      });

      //验证
      if (!reqData.paperName) {
        that.$message.warning("请填写考试名称");
        return;
      }

      if (reqData.paperName.length > 20) {
        that.$message.warning("考试名称不能超过20字");
        return;
      }

      if (!reqData.timeLength) {
        that.$message.warning("请填写考试时间");
        return;
      }

      if (that.nowCountSum != that.allCountSum) {
        that.$message.warning(
          "请按模板选择题数，已选择" +
            that.nowCountSum +
            "题，还差" +
            (that.allCountSum - that.nowCountSum) +
            "题"
        );
        return;
      }
      return true;

      console.log(reqData, 2);
    },

    //**************************************************************************************** */

    //获取模板信息
    //modelInfo.content 1章节数组
    //modelInfo.conrent[i].content 2章节中题型
    //modelInfo.content[i].content.questionIdList 3题型中可选题数
    getModelInfo() {
      let that = this;
      that.modelInfo = that.$route.params.row;
      that.score = that.modelInfo.score;
      console.log(that.modelInfo, 56);
      //添加存储id的questionIdList字段
      let content = that.modelInfo.content;
      if (content) {
        content.forEach(item => {
          item.content.forEach(item2 => {
            item2.questionIdList = [];
          });
        });
      }
      console.log(that.modelInfo, 665);
      //??假数据
      // that.modelInfo = {
      //   id: 29,
      //   isChapterModel: true,
      //   content: [
      //     {
      //       content: [
      //         {
      //           count: 5,
      //           score: 5,
      //           type: 1,
      //           typeName: "选择题",
      //           questionIdList: []
      //         },
      //         {
      //           count: 6,
      //           score: 6,
      //           type: 2,
      //           typeName: "判断题",
      //           questionIdList: []
      //         }
      //       ],
      //       id: 1,
      //       name: "s"
      //     },
      //     {
      //       content: [
      //         {
      //           count: 5,
      //           score: 5,
      //           type: 1,
      //           typeName: "选择题",
      //           questionIdList: []
      //         }
      //       ],
      //       id: 5,
      //       name: "章节名称1"
      //     }
      //   ]
      // };
      //查看模板
      that.modelInfoContent = that.modelInfo.content;
      that.getAllCountSum();
    },
    //获取模板信息后计算总题数
    getAllCountSum() {
      let that = this;
      let modelInfoContent = that.modelInfoContent;
      let allSum = 0;
      if (modelInfoContent) {
        modelInfoContent.forEach(item => {
          let sum = 0;
          item.content.forEach(item2 => {
            sum += item2.count;
          });
          allSum += sum;
        });
      }
      that.allCountSum = allSum;
    },
    //获取题目类型和章节下拉
    getTopicSelected() {
      var that = this;
      //?? 假数据
      // let chapterList = [
      //   { id: 1, name: "s", type: 1, introduction: "ssss" },
      //   { id: 5, name: "章节名称1", type: 1, introduction: "简介1" },
      //   { id: 6, name: "章节名称2", type: 2, introduction: "简介2" },
      //   { id: 7, name: "章节名称3", type: 3, introduction: "简介3" },
      //   { id: 8, name: "章节名称5", type: 2, introduction: "简介5" }
      // ];

      axios
        .get(
          "/tes/course/" +
            this.$localstorage.getLocalStorage("setCourseId") +
            "/businessType/1/question-repository/dropdown-list"
        )
        .then(function(res) {
          console.log("成功");
          console.log(res);
          if (res.status === 200) {
            if (res.data.code === 200) {
              //赋值章节列表
              let chapterList = res.data.data.chapterList;
              that.chapterList = chapterList;
              that.filterChapter();
            }
          }
        })
        .catch(function(err) {
          if (err.response) {
            console.log(err.response);
          }
        });
    },
    //获取章节后，按模板1过滤章节，**过滤之后默认选中第一个章节**
    filterChapter() {
      let that = this;
      //1
      //章节列表
      let chapterList = that.chapterList;
      //模板章节列表
      let modelInfoChapterList = that.modelInfo.content;
      //过滤章节列表
      let newChapterList = chapterList.filter(item =>
        modelInfoChapterList.some(item2 => item.id === item2.id)
      );
      //重新赋值章节列表
      that.chapterList = newChapterList;
      //过滤章节后默认选择第一个章节
      that.chapterId = that.chapterList[0].id;
      that.selectChange(that.chapterId);
    },

    //切换章节 获取章节题目列表
    selectChange(val) {
      this.getList(val);
    },
    //获取所有题型题目列表modelList
    getList(chapterId) {
      let that = this;
      axios
        .get(
          "/tes/course/" +
            this.$localstorage.getLocalStorage("setCourseId") +
            "/businessType/1/question-repository/question-by-type",
          { params: { chapterId: that.chapterId } }
        )
        .then(function(res) {
          console.log("成功");
          console.log(res);
          if (res.status === 200) {
            if (res.data.code === 200) {
              let modelList = res.data.data;
              that.modelList = modelList;
              //填空题替换(+)为（）
              $.each(modelList, function(i, d) {
                if (d.type == 3) {
                  $.each(d.questionList, function(i2, d2) {
                    let str = d2.content;
                    var result = str.replace(/\(\+\)/g, "（）"); //把(+)替换成()
                    d2.content = result;
                  });
                }
              });
              //设置当前章节题型
              that.setModelBtns(chapterId);
            } else {
              that.$message({
                message: res.data.message,
                type: "error"
              });
            }
          }
        })
        .catch(function(err) {
          if (err.response) {
            console.log(err.response);
          }
        });
    },
    //设置章节中题型 遍历tab头 ,设置之后默认选中第一个 在列表获取后执行
    setModelBtns(chapterId) {
      let that = this;
      let modelInfo = that.modelInfo;
      //找到模板，当前章节题型，可用于遍历tab头
      let modeInfoChapterQuestionList = modelInfo.content.find(
        item => item.id === chapterId
      ).content;
      that.modeInfoChapterQuestionList = modeInfoChapterQuestionList;
      //获取数据后默认点击第一个tab，需在数据加载完成后点击
      let questionType = that.modeInfoChapterQuestionList[0].type;
      that.tabClick(questionType, 0);
    },

    //tab头的点击事件 点击查找modelList列表中当前题型所有题目，并赋值给modelListItem
    //切换题型
    tabClick(type, index) {
      let that = this;
      //高亮
      that.btnIndex = index;
      //tab头点击，查找并改变table列表展示数据
      that.setModeListItem(type);
      that.setModelInfoItem(type);
      //回填
      that.upDataChecked();
    },
    //tab头点击，查找并改变table列表展示数据
    setModeListItem(type) {
      let that = this;
      let modelList = that.modelList;
      that.modelListItem = modelList.find(
        item => item.type === type
      ).questionList;
    },
    //tab头点击，查找并改变table列表展示数据
    setModelInfoItem(type) {
      let that = this;
      let modeInfoChapterQuestionList = that.modeInfoChapterQuestionList;
      that.modelInfoItem = modeInfoChapterQuestionList.find(
        item => item.type === type
      );
    },
    //回填，切换tab回填已选择数据，通过modelInfoItem中的已储存questionIdList，在当前列表中modelListItem找到对应行回填
    upDataChecked() {
      let that = this;
      let modelListItem = that.modelListItem;
      let questionIdList = that.modelInfoItem.questionIdList;
      modelListItem.forEach(item => {
        let isChecked = questionIdList.some(item2 => item.id === item2);
        if (isChecked) {
          item.isChecked = true;
          that.$nextTick(function() {
            that.$refs.md.toggleRowSelection(item, true);
          });
        }
      });
    },

    //表格单选
    selectItem(rows, row) {
      let that = this;
      //设置选中的isChecked为true
      that.noChoice(row);
      //选中存储到指定的questionIdList中
      that.saveIdList(rows, row);
      //计算已选择题数
      that.getNowCountSum();
      //计算当前类型题数
      that.getTypeNowCountSum();
    },
    //禁用，按照模板modelInfoItem中count数量，等于此数量禁用其他选项
    //点击取反，选中isChecked为true
    noChoice(row) {
      row.isChecked = !row.isChecked;
    },
    //选中存储到指定的questionIdList中
    saveIdList(rows, row) {
      let that = this;
      let questionIdList = that.modelInfoItem.questionIdList;
      //是否选中
      let selected = rows.length && rows.indexOf(row) !== -1;
      if (selected) {
        //选中 添加到指定题型中
        questionIdList.push(row.id);
      } else {
        //取消选中 从指定题型中删除
        questionIdList.splice(
          questionIdList.findIndex(item => item == row.id),
          1
        );
      }

      console.log(questionIdList, 123);
    },
    //当前题目数量
    getNowCountSum() {
      let that = this;
      let modelInfoContent = that.modelInfoContent;
      let allSum = 0;
      if (modelInfoContent) {
        modelInfoContent.forEach(item => {
          let sum = 0;
          item.content.forEach(item2 => {
            sum += item2.questionIdList.length;
          });
          allSum += sum;
        });
      }
      that.nowCountSum = allSum;
    },
    //当前题型数量
    getTypeNowCountSum(type) {
      let that = this;
      let modeInfoContent = that.modelInfoContent;
      if (modeInfoContent) {
        let sum = 0;
        modeInfoContent.forEach(item => {
          //console.log(item.content);
          let questionObj = item.content.find(item2 => item2.type === type);
          if (questionObj) {
            sum += questionObj.questionIdList.length;
          }
        });
        return sum;
      }
    },
    //复选框禁选 table中selection事件
    checkboxT(row, index) {
      let that = this;
      let maxCount = that.modelInfoItem.count;
      let nowCount = that.modelInfoItem.questionIdList.length;
      //如当前已选题数等于最大题数，除isChecked为true禁选之外禁选
      if (maxCount == nowCount && nowCount != 0) {
        return row.isChecked;
      } else {
        return 1;
      }
    },

    //预览试卷
    setParamsData() {
      let that = this;
      if (!that.filterReqData()) {
        return;
      }
      //本地存储
      let storage = window.localStorage;
      console.log(that.reqData, 445566);
      let reqData = JSON.stringify(that.reqData);
      storage.setItem("previewPaperData", reqData);
      //新窗口打开
      let routerData = that.$router.resolve({
        path: `/PreviewTestPaper/`
      });
      window.open(routerData.href, "_blank");
    },

    //预览试题
    dialogQuestionShow(row) {
      this.dialogQuestion = true;
      console.log(row, 4);
      this.rowData = row;
      //添加答案
      let answer = row.answer;
      this.answerTrue = "";
      let answerTrue = "";
      //选择题
      if (row.questionType === 1) {
        //遍历找出正确答案选项
        for (let x in answer) {
          console.log(answer[x].isCorrect, 4456);
          if (answer[x].isCorrect) {
            console.log(answer[x].isCorrect);
            answerTrue += this.answerChose[x];
          }
        }
        this.answerTrue = answerTrue;
      }
      //判断题
      if (row.questionType === 2) {
        if (answer[0].isCorrect) {
          this.answerTrue = "正确";
        } else {
          this.answerTrue = "错误";
        }
      }
      //填空题,简答，实验
      if (
        row.questionType === 3 ||
        row.questionType === 4 ||
        row.questionType === 6
      ) {
        this.answerTrue = answer[0].content;
      }
    },

    //查看模板
    lookQuestion() {
      let that = this;
      $(".look-question-btn")
        .mouseenter(function() {
          that.lookContent = true;
        })
        .mouseleave(function() {
          that.lookContent = false;
        });
    },
    //保存试卷
    submitData() {
      let that = this;
      if (!that.filterReqData()) {
        return;
      }
      const loading = that.$loading({
        lock: true,
        text: "正在保存中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      axios
        .post(
          "/tes/course/" +
            this.$localstorage.getLocalStorage("setCourseId") +
            "/course-test/paper/no-preview",
          that.reqData
        )
        .then(function(res) {
          loading.close();
          console.log("成功");
          console.log(res);
          if (res.status === 200) {
            if (res.data.code === 200) {
              let modelList = res.data.data;
              that.$message({
                message: "添加成功",
                type: "success"
              });
              that.$router.push({ path: "ExaminationList" });
            } else {
              that.$message({
                message: res.data.message,
                type: "error"
              });
            }
          }
        })
        .catch(function(err) {
          if (err.response) {
            console.log(err.response);
          }
        });
    }
  }
};
</script>
<style lang="scss" scoped>
@import "../../../styles/img-init";
</style>
<style lang="scss">
@import "../../../styles/layout/color_variables";
#after-select-chapter {
  .form-left label {
    text-align: left;
  }
  .input-long .el-input__inner {
    width: 200px;
  }
  .look-question-btn {
    margin: 0 20px;
    &:hover {
      color: $btn-blue;
    }
  }
  img {
    max-width: 80%;
  }
  width: 1200px;
  margin: 0px auto 30px;
  .el-badge sup {
    right: 12px;
  }
  .tab-group {
    margin-bottom: 20px;
    button {
      border: 1px solid #d9d9d9;
      padding: 0 20px;
      height: 40px;
      line-height: 40px;
      color: #474747;
      margin-left: -1px;
      border-radius: 0;
    }
    .active {
      background: #1277eb;
      color: #fff;
    }
  }
  .table-box thead .el-checkbox {
    display: none;
  }
  .add-time {
    .el-form-item {
      margin-bottom: 0;
    }
    .button-style {
      margin-left: 10px;
    }
  }
  .is-modal {
    margin-bottom: -60px;
  }
  .is-modal-bottom {
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
  }
  .btn-group {
    font-size: 0;
    margin: 0 0 20px 1px;
    .btn-tab {
      display: inline-block;
      font-size: 14px;
      height: 38px;
      line-height: 38px;
      border: 1px solid #d9d9d9;
      padding: 0 20px;
      margin-left: -1px;
    }
    .btn-tab:hover,
    .btn-tab.active {
      background: $btn-blue;
      border-color: $btn-blue;
      color: #fff;
      cursor: pointer;
    }
    .el-badge__content.is-fixed {
      z-index: 9;
    }
  }
  .el-badge__content {
    right: -10px;
    z-index: 1;
  }
  .el-tabs__nav-scroll {
    overflow: initial;
    &:after {
      content: "";
      display: block;
      clear: both;
    }
  }
  .el-tabs__nav-wrap {
    overflow: initial;
  }
  .el-badge:first-child .btn-tab {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
  }
  .el-badge:last-child .btn-tab {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
  }

  .el-tabs__nav-wrap::after {
    background: none;
  }
  .el-tabs__nav {
    margin-left: 1px;
  }
  .el-tabs__item {
    border: 1px solid #d9d9d9;
    padding: 0 20px;
    height: 40px;
    line-height: 40px;
    color: #474747;
    margin-left: -1px;
  }
  .el-tabs__item.is-active {
    background: #1277eb;
    color: #fff;
  }
  .el-tabs__active-bar {
    background: none;
  }
  #tab-first {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
  }
  #tab-fifth {
    position: relative;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
  }
  .dialog-questions {
    .el-dialog__body {
      max-height: 500px;
      overflow: auto;
    }
    .dialog-content {
      padding: 20px 64px 0;
      .question-title {
        font-weight: bold;
        font-size: 16px;
        margin-bottom: 20px;
        p {
          line-height: 30px;
        }
      }
      .question-chose {
        font-size: 14px;
        line-height: 24px;
        padding: 6px 0;
        display: flex;
        .question-flex {
          flex: 1;
          p {
            line-height: 24px;
          }
        }
      }
      .question-answer {
        font-size: 16px;
        .chose {
          font-size: 18px;
          color: #385899;
          vertical-align: -2px;
          p {
            line-height: 30px;
          }
        }
        margin-top: 20px;
      }
    }
    .el-dialog__footer {
      text-align: center;
    }
  }
  .chose-model {
    margin-bottom: 10px;
  }
  .iconfont {
    margin: 0 5px;
  }
  .look-question {
    position: relative;
    display: inline-block;
    cursor: pointer;
    .look-question-content {
      cursor: auto;
      position: absolute;
      z-index: 10;
      color: #727272;
      left: 10px;
      top: 36px;
      padding: 20px 34px;
      box-sizing: border-box;
      background: #fff;
      border: 1px solid #e8e8e8;
      .look-question-item {
        display: flex;
        line-height: 32px;
        border-bottom: 1px solid #e8e8e8;
        padding: 0 6px;
        font-size: 14px;
        .chapter-name {
          width: 150px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .look-question-item2 {
          display: flex;
          > div {
            min-width: 50px;
            text-align: center;
          }
        }
      }
      .look-question-score {
        font-size: 14px;
      }
    }
  }
  .del-modal {
    cursor: pointer;
  }
  .el-tabs__content {
    overflow: initial;
  }
  .one-question-score {
    position: absolute;
    top: 0;
    right: 0;
    .el-input {
      width: 150px;
    }
  }
}
</style>
